input,
textarea {
  padding: 3px 10px;
  line-height: 24px;
  border: 1px solid #e0e1e2;
  border-radius: 4px;
  margin: 0;
  outline: none;
  color: #333 !important;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);

  &:hover {
    @include borderColorPrimaryLight5();
  }

  &:focus {
    @include borderColor();
  }

  &::-webkit-input-placeholder {
    /* WebKit browsers */
    color: #b3b7c1;
  }
  &:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #b3b7c1;
  }
  &::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #b3b7c1;
  }
  &:-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: #b3b7c1;
  }
}

textarea {
  min-height: 32px;
  max-height: 320px;
  display: block;
  word-break: break-all;
}

// S 工单列表
.task {
  // flex布局
  &-flex {
    display: flex;
    flex-wrap: wrap;
  }
  &-ai {
    align-items: center;
  }
  &-ju {
    justify-content: center;
  }
  &-jend {
    justify-content: flex-end;
  }
  &-jsb {
    justify-content: space-between;
  }
  &-span1 {
    flex: 1;
  }
  &-span3 {
    flex: 3;
  }
  // 字体大小
  &-font12 {
    font-size: 12px;
  }
  &-font14 {
    font-size: 14px;
  }
  &-font16 {
    font-size: 16px;
  }
  &-font24 {
    font-size: 24px;
  }
  &-font20 {
    font-size: 20px;
  }
  // 加粗
  &-fw6 {
    font-weight: 600;
  }
  // 颜色
  &-c6 {
    color: #666;
  }
  &-c7 {
    color: #a7b5b5;
  }
  &-c90 {
    color: #909399;
  }
  &-c9 {
    color: #999;
  }
  &-c80 {
    color: #808080;
  }
  &-c3 {
    color: #333;
  }
  &-c8 {
    color: #8c8c8c;
  }
  &-cef {
    color: #ef6b6b !important;
  }
  &-c06 {
    color: rgba(0, 0, 0, 0.65);
  }
  &-cfa {
    color: #faae14;
  }
  &-c2 {
    .actived {
      @include fontColorImportant();
      background: $color-primary-light-1;
      border-radius: 4px;
      border: 1px solid $color-primary-light-2 !important;
      padding: 4px 8px;
    }
    // background: $color-primary-light-1;
    // border-radius: 4px;
    // border: 1px solid $color-primary-light-2;
    // padding: 0 12px
  }
  &-c13 {
    @include fontColor();
  }
  // 边距
  &-ml12 {
    margin-left: 12px;
  }
  &-mt12 {
    margin-top: 12px;
  }
  &-mr4 {
    margin-right: 4px;
  }
  &-ml4 {
    margin-left: 4px;
  }
  &-mt8 {
    margin-top: 8px;
  }
  &-mb10 {
    margin-bottom: 10px;
  }
  &-mt24 {
    margin-top: 24px;
  }
  &-mt15 {
    margin-top: 15px;
  }
  &-mt12 {
    margin-top: 12px;
  }
  &-mr12 {
    margin-right: 12px;
  }
  &-mr24 {
    margin-right: 24px;
  }
  &-ml15 {
    margin-left: 15px;
  }
  &-mr15 {
    margin-right: 15px;
  }
  &-mtb13 {
    margin-top: 13px;
    margin-bottom: 13px;
  }
  &-pl12 {
    padding-left: 12px;
  }
  &-ptb5 {
    padding: 5px 0 !important;
  }
  //
  &-pointer {
    cursor: pointer;
  }
  // top
  &-top2 {
    position: relative;
    top: 2px;
  }
  // 背景颜色
  &-bjef {
    background-color: #ef6b6b !important;
  }
  &-bjf7 {
    background-color: #ff7a45;
  }
  &-bjc2 {
    background-color: $color-primary-light-6;
  }
  &-bj9f {
    background-color: #40a9ff;
  }
  &-bjc4 {
    background-color: #52c41a;
  }
  &-bjd1 {
    background-color: #faad14;
  }
  &-bjf46 {
    background-color: #00ffe4;
  }
  // width
  &-w70 {
    width: 70%;
  }
}
// E 工单列表

// element
.base-button {
  border-radius: 4px !important;
  padding: 4px 15px !important;
}

.task-with-input {
  width: 300px !important;
}
.task-with-select {
  width: 120px !important;
}
.task-select-search-input {
  width: 500px !important;
}
.table-footer-select {
  width: 60px;
  margin: 0 4px;
}
.task-header-tr {
  height: 40px;
}
.task-list-view {
  .task-list-section th {
    border-color: #f2f2f2 !important;
    padding: 3px 0 !important;
    // border-bottom: 1px solid #f2f2f2 !important;
    // border-right: 1px solid #f2f2f2 !important;
    // &:first-child, &:last-child {
    //   border-right: none !important;
    // }
    > div {
      font-size: 14px !important;
      font-weight: 500 !important;
    }
  }
  .task-list-section td {
    border-color: #f2f2f2 !important;
    // padding: 4px 0 !important;
    // border-bottom: 1px solid #f2f2f2 !important;
    // border-right: 1px solid #f2f2f2 !important;
    // &:first-child, &:last-child {
    //   border-right: none !important;
    // }
    > div {
      // font-size: 13px !important;
      // line-height: 31px !important;
      color: #595959 !important;
      font-size: 14px !important;
    }
  }
  .el-table .sort-caret {
    width: 0;
    height: 0;
    border: solid 4px transparent;
    position: absolute;
    left: 7px;
  }
  .el-table .sort-caret.ascending {
    border-bottom-color: #999 !important;
    top: 7px !important;
  }
  .el-table .sort-caret.descending {
    border-top-color: #999 !important;
    bottom: 9px !important;
  }

  .el-table .ascending .sort-caret.ascending {
    border-bottom-color: #55b7b4 !important;
  }
  .el-table .descending .sort-caret.descending {
    border-top-color: #55b7b4 !important;
  }
  .el-table--border {
    border: none;
    padding: 0;
    &::after {
      width: 0 !important;
    }
  }
  .el-input-group__prepend {
    background-color: #fff !important;
    border-radius: 4px 0 0 4px;
  }
}
.task-view-customize {
  height: 400px;
  overflow: hidden;
  overflow-y: scroll;
  padding: 0 !important;
  width: 200px;
  &:hover {
    color: #333 !important;
    background-color: #fff !important;
  }
  > div {
    width: 100%;
    padding-left: 15px;
    &:hover {
      background-color: $color-primary-light-1;
      color: #42cece;
    }
    &:hover .task-list-dropdown-icon {
      display: block;
    }
  }
}
.task-icon {
  // font-size: 12px!important;
  margin-right: 4px;
  // color: #999!important;
}

.guide-box {
  position: relative;
}
.guide-disable-cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  // opacity: 0;
  background: transparent;
  z-index: 998;
}

.report-spare-parts-foot {
  .comment-list-table-footer-pagination {
    position: relative;
    text-align: right;
    margin-left: 15px;
    .el-pagination__sizes {
      position: absolute;
      left: 0;
    }
  }
}

.chart-tooltip-custom-style {
	white-space: normal; 
	word-break: break-all; 
	text-align: left; 
	line-height: 24px;
	max-width: 500px;
}

.input-with-append-search {
  .el-input input {
    border-radius: 4px 0 0 4px;
  }
  .el-input-group__append {
    background-color: $color-primary-light-6;
    border-radius: 0 4px 4px 0;
    border: 0;
    .el-button {
      border-radius: 0 4px 4px 0;
    }
  }
}

.icon-color {
  color: #595959 !important;
}
.el-message-box {
  width: 500px !important;
  max-height: 100vh;
  overflow-y: auto;
}

.el-input.is-disabled input {
  background-color: #f5f5f5 !important;
  color: #bfbfbf !important;
  border-color: #d9d9d9 !important;
}

.el-table thead th {
  color: #262626 !important;
  font-weight: 500 !important;
}

.el-table tbody td {
  color: #595959 !important;
  font-size: 14px !important;
}

.shb-el-message--success,
.shb-el-message--error,
.shb-el-message--warning,
.shb-el-message--info {
  z-index: 99999 !important;
}

.el-table th.el-table__cell {
  padding: 0;
}
.ml-3 {
  margin-left: 3px;
}

.bbx-form-item {
  width: 100%;
  margin-bottom: 10px;
}
.bbx-form-item-i {
  width: 100% !important;
}
.bbx-form-item-last {
  // margin-right: 0px !important;
}

.bbx-cell-form-builder, .bbx-cell-form-view{
  .form-view-row{
    align-items: flex-start;
  }
  .form-item{
    padding-left: 12px !important;
  }
  .form-item-customer-tag-edit{
    line-height: 32px;
  }
  .customer-tag-edit-text{
    margin-bottom: 0 !important;
    padding-top: 0;
  }
  .biz-team-select{
    box-sizing: border-box;
    padding-left: 0 !important;
  }
  .biz-team-select-placeholder{
    padding-left: 0 !important;
  }
  .biz-team-select-tags{
    padding-left: 10px;
  }
  .biz-team-select-placeholder{
    line-height: 30px;
  }
  .form-view-info-content{
    padding: 8px 12px;
  }
  .ql-editor{
    padding:0;
  }
  .bbx-form-item-view-info{
    .form-view-row{
      padding: 0;
    }
  }
  .form-item-project{
    .input-and-btn{
      button{
        height: 32px;
      }
    }
  }
  .view-group{
    width: 100%;
  }
  .form-logistics{
    padding-left: 0 !important;
    .err-msg-wrap{
      padding-left: 12px !important;
    }
  }
  @for $i from 2 through 4 {
    .bbx-cell-form-box-#{$i} {
      &.form-builder{
        max-width: 100%;
        padding: 12px 0 12px 12px;
      }
      
      .form-builder{
        max-width: 100%;
        padding: 12px 0 12px 0;
      }
      @include dynamic-form-list('bbx-form-cell-item', $i);
      .bbx-cell-form-box {
        @include dynamic-form-list('bbx-form-cell-item', $i);
      }
      .bbx-form-item-view-customer{
        @include dynamic-form-list('bbx-form-cell-item', $i);
      }
      .form-calendar-time{
        @include dynamic-form-list('bbx-form-cell-item', 2);
        .bbx-timezone-time-picker__view-time{
          white-space: wrap;
        }
      }
      .bbx-form-item-view-quality{
        @include dynamic-form-list('bbx-form-cell-item', $i);
      }
      .bbx-form-FormQuality{
        @include dynamic-form-list('bbx-form-cell-item', $i);
      }
      .bbx-task-planTime-view{
        @include dynamic-form-list('bbx-form-cell-item', $i);
      }
      .bbx-form-cell-item-margin{
        margin-right: 20px;
      }
      .bbx-form-item-view-connector{
        padding-right: 12px;
      }
      .bbx-form-item-view-padding{
        padding-right: 12px;
      }
      .bbx-form-item-view-no-margin{
        margin-right: 0 !important;
      }
      .form-logistics{
        padding-left: 0!important;
      }
      .bbx-form-item-quality_rule{
        padding-left: 0; 
       }
      .product_menu_box{
        width: calc(100% - 12px);
      }
      .bbx-form-item-materialsBill{
        width: calc(100% - 12px);
      }
      .bbx-form-item-connector{
        width: calc(100% - 12px);
      }
      
    }

    .bbx-from-item-cell-box-#{$i} {
      
      .form-logistics-content{
        @include dynamic-form-list('bbx-form-cell-item', $i);
      }

      .form-address, .form-address-international, .international-pick{
        @include dynamic-form-list('bbx-form-cell-item', 2);
        .form-address-picker-des{
          margin-top: 0;
        }
      }

    
    }
    
  }

  
}

.bbx-form-cell-box{
  width: 100% !important;
}
.form-address-picker-des{
  margin-top: 16px;
  height: 32px;
}
.bg-fa{
  background-color: #fafafa !important;
}

.bbx-normal-form-view-cell{
  padding: 16px 4px 16px 16px;
}
.bbx-normal-form-builder-cell{
  padding: 24px 20px 24px 32px !important;
  .form-builder{
    padding: 0 !important;
  }
}
.bbx-normal-page-box{
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.common-column {
  color: #595959 !important;
  &:hover {
    color: $color-primary !important;
  }
}
.table-min-width {
  font-size: 13px;
  min-width: 84px;
}